<template>
  <div class="food_wrapper">
    <food-category v-if="this.categoryDetail.length > 0"
      :category="category"
      :categoryDetail="categoryDetail"
      :restaurant_category_id="restaurant_category_id"
      :restaurant_category_ids="restaurant_category_ids"
      @select="selectCategoryName"
      @get="getCategoryIds"
    ></food-category>
    <food-header v-else :headTitle = "headTitle"></food-header>
    <food-filter
      @select="sortList"
      @selectD="selectDeliveryMode"
      @selectS="selectSupportIds"
      @clear="clearSelect"
      @confirm="confirmSelectFun"
      :sortByType="sortByType"
      :sortByTitle="sortByTitle"
      :delivery="delivery"
      :activity="activity"
      :delivery_mode="delivery_mode"
      :support_ids="support_ids"
      :filterNum="filterNum"
    ></food-filter>
    <food-shop-list class="shop_list"
      :geohash="geohash"
      :restaurantCategoryId="restaurant_category_id"
      :restaurantCategoryIds="restaurant_category_ids"
      :sortByType="sortByType"
      :deliveryMode="delivery_mode"
      :supportIds="support_ids"
      :confirmSelect="confirmStatus"
      v-if="latitude"
    >
      <div slot="loading" >
        <van-loading color="#1989fa" class="loading"/>
      </div>
    </food-shop-list>
  </div>
</template>

<script>
import { Loading } from 'vant'
import { mapState, mapMutations } from 'vuex'
import FoodCategory from './components/Category'
import FoodFilter from './components/Filter'
import FoodShopList from '@/components/common/ShopList'
import FoodHeader from '@/components/header/Header'
export default {
  name: 'Food',
  components: {
    FoodCategory,
    FoodFilter,
    FoodShopList,
    FoodHeader,
    [Loading.name]: Loading
  },
  data () {
    return {
      geohash: '', // home页面传递过来的地址geohash
      headTitle: '', // 页面头部标题
      foodTitle: '', // 排序左侧头部标题
      restaurant_category_id: '', // 食品类型id值
      restaurant_category_ids: '', // 筛选类型的id
      category: [], // category分类左侧数据
      categoryDetail: [], // category分类右侧的详细数据
      sortByTitle: '综合排序', // 筛选的条件标题
      sortByType: null, // 根据何种方式排序
      delivery: [], // 配送方式数据
      activity: [], // 商家支持活动数据
      delivery_mode: null, // 选中的配送方式项
      support_ids: [], // 选中的商家服务项
      filterNum: 0, // 所选中的筛选的条件总数量
      confirmStatus: false // 确认选择
    }
  },
  created () {
    this.initData()
  },
  computed: {
    ...mapState(['latitude', 'longitude'])
  },
  methods: {
    ...mapMutations(['RECORD_ADDRESS']),

    // 初始化获取数据
    initData () {
      // 获取从home页面传递过来的参数
      this.geohash = this.$route.query.geohash
      this.headTitle = this.$route.query.title
      this.foodTitle = this.headTitle
      this.restaurant_category_id = this.$route.query.restaurant_category_id
      // 防止刷新页面时，vuex状态丢失，经度纬度需要重新获取，并存入vuex
      if (!this.latitude) {
        this.$api.home.homeAddress(this.geohash).then(res => {
          // 记录当前经度纬度到vuex
          this.RECORD_ADDRESS(res.data)
        })
      }
      // 获取category分类左侧数据
      this.$api.home.foodCategory(this.latitude, this.longitude).then(res => {
        this.category = res.data.filter(item => {
          return (item.count > 0)
        })
        // 初始化时定位当前category分类左侧默认选择项，在右侧展示出其sub_categories列表
        this.category.forEach(item => {
          if (this.restaurant_category_id == item.id) { // eslint-disable-line
            // 过滤掉左侧没有子分类的项
            this.categoryDetail = item.sub_categories.filter((item, index) => {
              return (index > 0)
            })
          }
        })
      })
      // 获取筛选列表的配送方式
      this.$api.home.foodDelivery(this.latitude, this.longitude).then(res => {
        this.delivery = res.data
      })
      // 获取筛选列表的商铺活动
      this.$api.home.foodActivity(this.latitude, this.longitude).then(res => {
        this.activity = res.data
        this.activity.forEach((item, index) => {
          this.support_ids[index] = { status: false, id: item.id }
        })
      })
    },
    // 选中Category左侧列表的某个选项时，右侧渲染相应的sub_categories列表
    selectCategoryName (id, index) {
      this.restaurant_category_id = id
      // 过滤掉右侧第一个“全部..”
      this.categoryDetail = this.category[index].sub_categories.filter((item, index) => {
        return (index > 0)
      })
    },
    // selectCategoryName (id, index) {
    //   // 第一个选项 -- 全部商家 因为没有自己的列表，所以点击则默认获取选所有数据
    //   if (index === 0) {
    //     this.restaurant_category_ids = null
    //   } else {
    //     // 不是第一个选项时，右侧展示其子级sub_categories的列表
    //     this.restaurant_category_id = id
    //     this.categoryDetail = this.category[index].sub_categories
    //   }
    // },

    // 选中Category右侧列表的某个选项时，进行筛选，重新获取数据并渲染
    getCategoryIds (id, name) {
      this.restaurant_category_ids = id
      this.foodTitle = name
    },
    // 点击某个排序方式，获取事件对象的data值，并根据获取的值重新获取数据渲染
    sortList (event) {
      // 如果点击的是 span 中的文字，则需要获取到 span 的父标签 li
      let node
      if (event.target.nodeName.toUpperCase() === 'LI') {
        node = event.target
      } else {
        node = event.target.parentNode
      }
      this.sortByType = node.getAttribute('data')
      this.sortByTitle = node.firstChild.textContent
    },
    // 筛选选项中的配送方式选择
    selectDeliveryMode (id) {
      // delivery_mode为空时，选中当前项，并且filterNum加一
      if (this.delivery_mode == null) {
        this.filterNum++
        this.delivery_mode = id
      } else if (this.delivery_mode === id) {
        // delivery_mode为当前已有值时，清空所选项，并且filterNum减一
        this.filterNum--
        this.delivery_mode = null
      } else {
        // delivery_mode已有值且不等于当前选择值，则赋值delivery_mode为当前所选id
        this.delivery_mode = id
      }
    },
    selectSupportIds (index, id) {
      // 数组替换新的值
      this.support_ids.splice(index, 1, {
        status: !this.support_ids[index].status,
        id
      })
      // 重新计算filterNum的个数
      this.filterNum = this.delivery_mode == null ? 0 : 1
      this.support_ids.forEach(item => {
        if (item.status) {
          this.filterNum++
        }
      })
    },
    // 只有点击清空按钮才清空数据，否则一直保持原有状态
    clearSelect () {
      this.support_ids.map(item => (item.status = false))
      this.filterNum = 0
      this.delivery_mode = null
    },
    // 点击确认时，将需要筛选的id值传递给子组件，并且收回列表
    confirmSelectFun () {
      // 状态改变时，因为子组件进行了监听，会重新获取数据进行筛选
      this.confirmStatus = !this.confirmStatus
    }
  }
}
</script>

<style lang="stylus" scoped>
  .shop_list
    margin-top: 1.62rem
</style>
